import React, { Component } from 'react';
import orderProcess from './OrderProcess.module.css';
import { Row, Col, Button, message } from 'antd';
import {
    UploadOutlined,
    SafetyCertificateOutlined,
    PayCircleOutlined,
    MedicineBoxOutlined,
    SendOutlined,
    ShopOutlined,
    SmileOutlined,
    TransactionOutlined,
    PropertySafetyOutlined,
} from '@ant-design/icons';
export default class OrderProcess extends Component {
    constructor(props) {
        super(props);
        this.state = {
            bool:false
        }
    }
    changeState = (e) => {
        let index =e.currentTarget.getAttribute('data-index');
        let bool = this.state.bool
        console.log(bool,555,index)
        this.setState({
           bool:!bool
        },()=>{
            this.setState({
                ['bool'+index]:this.state.bool,
            })
        })
    }
    saveEdit = ()=>{
        message.success('保存成功！')
    }
    render() {
        return (
            <div className={orderProcess.content}>
                <ul className={orderProcess.explain}>
                    <li>
                        <span className={orderProcess.circleSolid}></span>
                        <span className={orderProcess.circleTips}>表示此订单步骤不允许调整</span>
                    </li>
                    <li>
                        <span className={orderProcess.circleHollow}></span>
                        <span className={orderProcess.circleTips}>表示已启用此订单步骤</span>
                    </li>
                    <li>
                        <span className={orderProcess.circleGray}></span>
                        <span className={orderProcess.circleTips}>表示已禁用此订单步骤</span>
                    </li>
                </ul>
                <div className={orderProcess.orderGoods}>
                    <p className={orderProcess.processTips}>订货流程设置</p>
                    <ul className={orderProcess.processBox}>
                        <li>
                            <div className={orderProcess.iconBox}>
                                <span className={orderProcess.leftLine}></span>
                                <div className={[`${orderProcess.stepIcon}`, `${orderProcess.notAllow}`].join(' ')}>
                                    <UploadOutlined className={orderProcess.icon} />
                                </div>
                                <span className={orderProcess.rightLine}></span>
                            </div>
                            <div className={orderProcess.stepTips}>
                                【经销商】提交订单
                            </div>
                        </li>
                        <li>
                            <div className={orderProcess.iconBox}>
                                <span className={orderProcess.leftLine}></span>
                                <div className={[`${orderProcess.stepIcon}`, `${orderProcess.notAllow}`].join(' ')}>
                                    <SafetyCertificateOutlined className={orderProcess.icon} />
                                </div>
                                <span className={orderProcess.rightLine}></span>
                            </div>
                            <div className={orderProcess.stepTips}>
                                订单审核
                            </div>
                        </li>
                        <li>
                            <div className={orderProcess.iconBox}>
                                <span className={orderProcess.leftLine}></span>
                                <button onClick={this.changeState} data-index = {1} 
                                className={[`${orderProcess.allowStepIcon}`, `${this.state.bool1?orderProcess.forbidden:orderProcess.allow}`].join(' ')}>
                                    <PayCircleOutlined className={orderProcess.icon} />
                                </button>
                                <span className={orderProcess.rightLine}></span>
                            </div>
                            <div className={orderProcess.stepTips}>
                                财务审核

                            </div>
                        </li>
                        <li>
                            <div className={orderProcess.iconBox}>
                                <span className={orderProcess.leftLine}></span>
                                <button onClick={this.changeState} data-index = {2}  
                                className={[`${orderProcess.allowStepIcon}`, `${this.state.bool2?orderProcess.forbidden:orderProcess.allow}`].join(' ')}>
                                    <MedicineBoxOutlined className={orderProcess.icon} />
                                </button>
                                <span className={orderProcess.rightLine}></span>
                            </div>
                            <div className={orderProcess.stepTips}>
                                出库审核
                            </div>
                        </li>
                        <li>
                            <div className={orderProcess.iconBox}>
                                <span className={orderProcess.leftLine}></span>
                                <button onClick={this.changeState} data-index = {3} 
                                className={[`${orderProcess.allowStepIcon}`, `${this.state.bool3?orderProcess.forbidden:orderProcess.allow}`].join(' ')}>
                                    <SendOutlined className={orderProcess.icon} />
                                </button>
                                <span className={orderProcess.rightLine}></span>
                            </div>
                            <div className={orderProcess.stepTips}>
                                发货确认
                            </div>
                        </li>
                        <li>
                            <div className={orderProcess.iconBox}>
                                <span className={orderProcess.leftLine}></span>
                                <button onClick={this.changeState} data-index = {4} 
                                className={[`${orderProcess.allowStepIcon}`, `${this.state.bool4?orderProcess.forbidden:orderProcess.allow}`].join(' ')}>
                                    <ShopOutlined className={orderProcess.icon} />
                                </button>
                                <span className={orderProcess.rightLine}></span>
                            </div>
                            <div className={orderProcess.stepTips}>
                                【经销商】收货确认

                            </div>
                        </li>
                        <li>
                            <div className={orderProcess.iconBox}>
                                <span className={orderProcess.leftLine}></span>
                                <div className={[`${orderProcess.stepIcon}`, `${orderProcess.notAllow}`].join(' ')}>
                                    <SmileOutlined className={orderProcess.icon} />
                                </div>
                            </div>
                            <div className={orderProcess.stepTips}>
                                完成
                            </div>
                        </li>
                    </ul>
                </div>
                <div className={orderProcess.returnGoods}>
                    <p className={orderProcess.processTips}>退货流程设置</p>
                    <ul className={orderProcess.processBox}>
                        <li>
                            <div className={orderProcess.iconBox}>
                                <span className={orderProcess.leftLine}></span>
                                <div className={[`${orderProcess.stepIcon}`, `${orderProcess.notAllow}`].join(' ')}>
                                    <UploadOutlined className={orderProcess.icon} />
                                </div>
                                <span className={orderProcess.rightLine}></span>
                            </div>
                            <div className={orderProcess.stepTips}>
                                【经销商】提交订单
                            </div>
                        </li>
                        <li>
                            <div className={orderProcess.iconBox}>
                                <span className={orderProcess.leftLine}></span>
                                <div className={[`${orderProcess.stepIcon}`, `${orderProcess.notAllow}`].join(' ')}>
                                    <SafetyCertificateOutlined className={orderProcess.icon} />
                                </div>
                                <span className={orderProcess.rightLine}></span>
                            </div>
                            <div className={orderProcess.stepTips}>
                                订单审核
                            </div>
                        </li>
                        <li>
                            <div className={orderProcess.iconBox}>
                                <span className={orderProcess.leftLine}></span>
                                <button onClick={this.changeState} data-index = {5} 
                                className={[`${orderProcess.allowStepIcon}`, `${this.state.bool5?orderProcess.forbidden:orderProcess.allow}`].join(' ')}>
                                    <ShopOutlined className={orderProcess.icon} />
                                </button>
                                <span className={orderProcess.rightLine}></span>
                            </div>
                            <div className={orderProcess.stepTips}>
                                收货确认

                            </div>
                        </li>
                        <li>
                            <div className={orderProcess.iconBox}>
                                <span className={orderProcess.leftLine}></span>
                                <button onClick={this.changeState} data-index = {6} 
                               className={[`${orderProcess.allowStepIcon}`, `${this.state.bool6?orderProcess.forbidden:orderProcess.allow}`].join(' ')}>
                                    <TransactionOutlined className={orderProcess.icon} />
                                </button>
                                <span className={orderProcess.rightLine}></span>
                            </div>
                            <div className={orderProcess.stepTips}>
                                退款确认
                            </div>
                        </li>
                        <li>
                            <div className={orderProcess.iconBox}>
                                <span className={orderProcess.leftLine}></span>
                                <button onClick={this.changeState} data-index = {7} 
                                className={[`${orderProcess.allowStepIcon}`, `${this.state.bool7?orderProcess.forbidden:orderProcess.allow}`].join(' ')}>
                                    <PropertySafetyOutlined className={orderProcess.icon} />
                                </button>
                                <span className={orderProcess.rightLine}></span>
                            </div>
                            <div className={orderProcess.stepTips}>
                                收款确认
                            </div>
                        </li>
                        <li>
                            <div className={orderProcess.iconBox}>
                                <span className={orderProcess.leftLine}></span>
                                <div className={[`${orderProcess.stepIcon}`, `${orderProcess.notAllow}`].join(' ')}>
                                    <SmileOutlined className={orderProcess.icon} />
                                </div>
                            </div>
                            <div className={orderProcess.stepTips}>
                                完成
                            </div>
                        </li>
                    </ul>
                </div>
                <Row className={orderProcess.btnBox} justify="center">
                    <Col span={24} className={orderProcess.test}>
                        <Button type="primary" className={orderProcess.saveBtn} onClick = {this.saveEdit}>保存</Button>
                    </Col>
                </Row>
            </div>
        )
    }
}
